<template>
	<div style="height: 100%;width: 100%;padding: 10px 0px 0px;">
		<div style="height: 100%;width: 200px;background-color: #FFFFFF;display: inline-block;float: left;margin-right: 10px;">
			<div style="height: 50px;width: 100%;padding: 10px;">
				<el-input placeholder="请输入内容" v-model="input3" class="input-with-select" size="mini">
					<el-button slot="append" icon="el-icon-search"></el-button>
				</el-input>
			</div>
			<div style="height:calc(100% - 50px);width: 100%;padding: 10px;">
				<el-scrollbar wrap-class="scrollbar-wrapper">
					<el-tree :props="props"
							 :load="loadNode"
							 lazy
							 show-checkbox>
					</el-tree>
				</el-scrollbar>
			</div>
		</div>
		<div style="height: 100%;width: calc(100% - 210px);background-color: #FFFFFF;display: inline-block;float: left;">
			<div style="height: 40px;width: 100%;text-align: left;font-size: 14px;padding-left: 20px;font-weight: bold;" class="middle">列表2</div>
			<div style="height: 60px;width: 100%;text-align: left;font-size: 14px;padding-left: 20px;" class="middle">
				<el-form :inline="true" :model="formInline" class="demo-form-inline">
				  <el-form-item label="审批人">
				    <el-input v-model="formInline.user" placeholder="审批人" size="mini"></el-input>
				  </el-form-item>
				  <el-form-item label="活动区域">
				    <el-select v-model="formInline.region" placeholder="活动区域" size="mini">
				      <el-option label="区域一" value="shanghai"></el-option>
				      <el-option label="区域二" value="beijing"></el-option>
				    </el-select>
				  </el-form-item>
				  <el-form-item label="审批人">
				    <el-input v-model="formInline.user" placeholder="审批人" size="mini"></el-input>
				  </el-form-item>
				  <el-form-item>
				    <el-button type="primary" @click="onSubmit" size="mini">查询</el-button>
				  </el-form-item>
				</el-form>
			</div>
			<div style="height: 60px;width: 100%;text-align: left;font-size: 14px;padding-left: 20px;" class="middle">
				<el-button type="primary" size="mini">新增</el-button>
				<el-button  size="mini">修改</el-button>
			</div>
			<div style="height: calc(100% - 160px);padding: 0 20px;">
				<div style="height: 85%;width: 100%;">
					<el-table :data="tableData" stripe border style="width: 100%" height="100%">
						<el-table-column type="index" label="序号" width="50"></el-table-column>
					    <el-table-column prop="xm" label="姓名" width=""></el-table-column>
						<el-table-column prop="cjr" label="创建人"width="" ></el-table-column>
						<el-table-column prop="cjsj" label="创建时间" width=""></el-table-column>
						 <el-table-column prop="" label="操作" width="120">
							<template slot-scope="scope">
								<el-button size="small"  type="text">编辑</el-button>
								<el-button size="small"  type="text">删除</el-button>
							</template>
						</el-table-column> 
					  </el-table>
				</div>
				<div style="height: 15%;width: 100%;">
					<div class="pageIn">
						<el-pagination
							  @size-change="handleSizeChange"
							  @current-change="handleCurrentChange"
							  :current-page="currentPage"
							  :page-sizes="[100, 200, 300, 400]"
							  :page-size="100"
							  layout="total, sizes, prev, pager, next, jumper"
							  :total="400">
						</el-pagination>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>

	import {findDmTree,findDmChildTree} from '@/api/app/xtgl0301/dmbgl.js'

	export default{
		
		data(){
			return{
				formInline: {
				     user: '',
				     region: ''
				},
				props: {
					label: 'dmmc',
					id: 'dmid',
					parentId: 'sjdmid',
					isLeaf: false
				},
				tableData: [{
							xm: '张三',
							cjr: '张大宝',
							cjsj:'2020-01-01 12:00:01'
				        },{
							xm: '李四',
							cjr: '张大宝',
							cjsj:'2020-01-01 12:00:01'
				        },{
							xm: '王五',
							cjr: '张大宝',
							cjsj:'2020-01-01 12:00:01'
				        },{
							xm: '王五',
							cjr: '张大宝',
							cjsj:'2020-01-01 12:00:01'
				        },{
							xm: '王五',
							cjr: '张大宝',
							cjsj:'2020-01-01 12:00:01'
				        },{
							xm: '王五',
							cjr: '张大宝',
							cjsj:'2020-01-01 12:00:01'
				        },{
							xm: '王五',
							cjr: '张大宝',
							cjsj:'2020-01-01 12:00:01'
				        },{
							xm: '王五',
							cjr: '张大宝',
							cjsj:'2020-01-01 12:00:01'
				        },{
							xm: '王五',
							cjr: '张大宝',
							cjsj:'2020-01-01 12:00:01'
				        },{
							xm: '王五',
							cjr: '张大宝',
							cjsj:'2020-01-01 12:00:01'
				        },{
							xm: '王五',
							cjr: '张大宝',
							cjsj:'2020-01-01 12:00:01'
				        },{
							xm: '王五',
							cjr: '张大宝',
							cjsj:'2020-01-01 12:00:01'
				        }],
			}
		},
		methods:{
			loadNode (node, resolve) {
				//如果展开第一级节点，从后台加载一级节点列表
				if (node.level == 0) {
					console.log(0);
					this.loadfirstnode(resolve);
				}
				//如果展开其他级节点，动态从后台加载下一级节点列表
				if (node.level >= 1) {
					console.log(1);
					this.loadchildnode(node, resolve);
					return resolve([]);			// 加上这个，防止在该节点没有子节点时一直转圈的问题发生。
				}
			},

			async loadfirstnode (resolve) {
				let data = await findDmTree();
				this.props = data.data.content;
				resolve(data.data.content);
			},

			async loadchildnode (node,resolve) {
				console.log(node.data.dmid);
				let parms ={                    //axios(ajax) 请求参数
					sjdmid:node.data.dmid
				}
				let data = await findDmChildTree(parms);
				console.log(data.data.content);
				this.props = data.data.content;
				resolve(data.data.content);
			},

			go(){
				this.$router.push('/dashboard2')
			},
			onSubmit() {
				console.log('submit!');
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
		    },
		    handleCurrentChange(val) {
			  console.log(`当前页: ${val}`);
		    },
		},
	}
</script>

<style scoped="scoped">
.pageIn{
 	height: 100%;
 	width: 50%;
 	display:flex;
 	text-align: right;
 	align-items:center;
 	line-height: 100%;
 	float: right;
 }
</style>
